<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>孝行通</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .el-table__empty-block {
            height: 0;
        }
        .img-delete:before {
            position: absolute;
            top: -5px;
            color: red;
            margin-left: -15px;
            z-index: 999;
        }
    </style>

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">{{pageTitle}}</h1>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="line-height: 36px;">基本信息</span>
                    </div>
                    <div>
                        <el-form ref="form" :model="form" label-width="150px" style="width: 500px;">
                            <el-form-item label="活动名称">
                                <el-input v-model="form.name" placeholder="名称" style="width: 200px"></el-input>
                            </el-form-item>
                            <el-form-item label="开始时间">
                                <el-date-picker style="width: 200px"
                                        v-model="form.startTime"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="结束时间">
                                <el-date-picker style="width: 200px"
                                        v-model="form.endTime"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="免费次数">
                                <el-row>
                                    <el-col :span="5">
                                        <el-input v-model="form.freeTime"></el-input>
                                    </el-col>
                                    <el-col :span="5">
                                        <span>次</span>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="每天可用次数">
                                <el-input v-model="form.joinTime" style="width: 200px"></el-input>
                            </el-form-item>
                            <el-form-item label="是否可积分兑换">
                                <el-radio-group v-model="form.canUsePoint"  style="line-height: 36px;">
                                    <el-radio :label="1">是</el-radio>
                                    <el-radio :label="0">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item v-if="form.canUsePoint === 1" label="积分兑换">
                                <el-row>
                                    <el-col :span="5">
                                        <el-input v-model="form.pointBuyPoint"></el-input>
                                    </el-col>
                                    <el-col :span="5">
                                        <span>积分兑换</span>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-input v-model="form.pointBuyCount"></el-input>
                                    </el-col>
                                    <el-col :span="5">
                                        <span>次</span>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="参与送积分">
                                <el-row>
                                    <el-col :span="5">
                                        <el-input v-model="form.sendPoint"></el-input>
                                    </el-col>
                                    <el-col :span="10">
                                        <span>仅送给未中奖的客户</span>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-switch style="padding-top: 5px" on-text="" off-text="" v-model="form.sendPointType"></el-switch>
                                    </el-col>
                                </el-row>

                            </el-form-item>
                            <el-form-item label="活动说明">
                                <el-input type="textarea" v-model="form.memo" style="width: 300px" :disabled="readonly"></el-input>
                            </el-form-item>
                            <el-form-item label="图片">
                                <el-row>
                                    <img height="100" v-if="form.banner !== ''" :src="qiniuUrl + form.banner">
                                    <i class="el-icon-circle-close img-delete" v-if="form.banner !== ''" @click="deletePic2"></i>
                                    <el-upload
                                            :before-upload="beforeUpload"
                                            style="display: inline-block"
                                            :show-file-list="false"
                                            action="/file/upload"
                                            :on-success="uploadSuccess2">
                                        <el-button size="small" type="primary">点击上传</el-button>
                                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                    </el-upload>
                                </el-row>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
                <el-card class="box-card" style="margin-top: 10px">
                    <div slot="header" class="clearfix">
                        <span style="line-height: 36px;">奖项信息(8个奖项)</span>
                    </div>
                    <el-table
                            :data="form.itemsList"
                            border
                            style="width: 100%">
                        <el-table-column
                                type="index"
                                label="序号"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="名称">
                        </el-table-column>
                        <el-table-column
                                prop="type"
                                label="奖品类型"
                                :formatter="formatterGiftType">
                        </el-table-column>
                        <el-table-column
                                prop="gift"
                                label="奖品"
                                :formatter="formatterGiftContent">
                        </el-table-column>
                        <el-table-column
                                prop="winRate"
                                label="中奖率"
                                :formatter="formatterWinRate">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="操作"
                                inline-template>
                            <div style="margin-left: -10px">
                                <el-button size="small" type="primary" class="el-icon-edit" @click.native.prevent="editGift(row, $index)"></el-button>
                            </div>
                        </el-table-column>
                    </el-table>
                </el-card>
                <div style="text-align: center;padding-top: 30px">
                    <el-button type="primary" @click="saveForm">保存</el-button>
                    <el-button @click="cancelAddForm">取消</el-button>
                </div>
                <el-dialog title="添加奖项" v-model="addGiftDialog">
                    <el-form ref="addGiftForm" :model="addGiftForm" label-width="80px">
                        <el-form-item label="奖品类型">
                            <el-radio-group v-model.number="addGiftForm.type"  style="line-height: 36px;">
                                <el-radio :label="1">赠送积分</el-radio>
                                <el-radio :label="2">赠送商品</el-radio>
                                <el-radio :label="3">谢谢参与</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="addGiftForm.type === 1" label="赠送积分">
                            <el-input-number v-model="addGiftForm.content" :min="0" :controls="false"></el-input-number>
                        </el-form-item>
                        <el-form-item v-if="addGiftForm.type === 2" label="商品">
                            <el-tag v-if="addGiftForm.itemName !== '' && addGiftForm.itemName !== undefined" style="margin-right:5px;margin-top: 8px">{{addGiftForm.itemName}}</el-tag>
                            <el-button type="primary" @click.native.prevent="showDialog">选择商品</el-button>
                        </el-form-item>
                        <el-form-item v-if="addGiftForm.type !== 3" label="奖品名称">
                            <el-input v-model="addGiftForm.name" style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="奖品数量">
                            <el-input v-model="addGiftForm.count" style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="中奖率">
                            <el-row>
                                <el-col :span="6">
                                    <el-input-number style="width: 200px;" v-model="addGiftForm.winRate" :min="0" :max="remainWinRate" :controls="false"></el-input-number>
                                </el-col>
                                <el-col :span="5">
                                    <span>%(剩余中奖率{{remainWinRate}})</span>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="奖品图片">
                            <el-row>
                                <img height="100" v-if="addGiftForm.picUrl !== ''" :src="qiniuUrl + addGiftForm.picUrl">
                                <i class="el-icon-circle-close img-delete" v-if="addGiftForm.picUrl !== ''" @click="deletePic">
                                </i>
                                <el-upload
                                        :before-upload="beforeUpload"
                                        style="display: inline-block"
                                        :show-file-list="false"
                                        action="/file/upload"
                                        :on-success="uploadSuccess">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                </el-upload>
                            </el-row>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer" style="text-align: center">
                        <el-button @click="cancelAddGift">取 消</el-button>
                        <el-button type="primary" @click.native.prevent="saveGift">保 存</el-button>
                    </div>
                </el-dialog>
            </div>
            <!-- end content-right -->
            <yiqi-select-item ref="selectItem" :item-common-dialog="selectItemDialog" :check-list="tableData" :checked-ids="checkedIds" :save-callback="saveCallback" :cancel-callback="cancelCallback"></yiqi-select-item>
            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>
</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>
<!-- 引入共通js -->
<script src="/static/js/common.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function(){
            return {
                user: ${(user)!'null'},
                tableData: [],
                checkedIds: [],
                selectItemDialog: false,
                addGiftDialog: false,
                editGiftType: 'add',
                pageTitle: '添加抽奖活动',
                remainWinRate: 100,
                addGiftForm: {
                    type: 1,
                    content: 0,
                    itemName: '',
                    name: '',
                    count: 0,
                    winRate: 0,
                    picUrl: ''
                },
                readonly: false,
                qiniuUrl: list.qiniuUrl,
                form: {
                    id: ${(id)!'0'},
                    name: '',
                    startTime: '',
                    endTime: '',
                    freeTime: '',
                    joinTimeType: 4,
                    joinTime: '',
                    canUsePoint: 0,
                    pointBuyPoint: '',
                    pointBuyCount: '',
                    sendPoint: '',
                    sendPointType: false,
                    memo: '',
                    banner: '',
                    itemsList: []
                },
                headerNavList: list.headerNavList,
                accountNavList: list.accountNavList,
                leftMenuList: list.menu,
                imgType: '',
                editIndex: ''
            }
        },
        mounted: function () {
            this.getData()
        },
        methods: {
            getData () {
                if (this.form.id === 0) {
                    this.pageTitle = "添加抽奖活动";
                    for (let i = 0; i < 8; i++) {
                        this.form.itemsList.push({
                            type: 3,
                            content: '',
                            itemName: '',
                            name: '谢谢参与',
                            count: 0,
                            winRate: 0,
                            picUrl: ''
                        })
                    }
                    this.remainWinRate = 100
                    return
                }
                let that = this
                let obj = {
                    id: this.form.id
                }
                this.pageTitle = "编辑抽奖活动";
                let loading = this.$loading({fullscreen: true, lock: true, text: '加载中'});
                this.http('/lottery/detail',obj,function (res) {
                    if(res.status === 200){
                        loading.close();
                        that.form = res.data.detail.returnValue
                        that.form.sendPointType = that.form.sendPointType?true:false
                        if (that.form.pointBuy !== undefined && that.form.pointBuy !== '') {
                            let arr = that.form.pointBuy.split(':')
                            that.form.pointBuyPoint = arr[0]
                            that.form.pointBuyCount = arr[1]
                            that.form.canUsePoint = 1
                        } else {
                            that.form.canUsePoint = 0
                        }
                        that.form.joinTimeType = 5
                        if (that.form.joinTime === undefined) {
                            that.form.joinTime = ''
                        }
                        that.remainWinRate = 0
                    }else{
                        loading.close();
                        that.$alert(res.errMsg, '提示',{
                            confirmButtonText:'确定',
                        })
                    }
                },function (res) {
                    loading.close();
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            editGift (row, index) {
                this.editIndex = index;
                if (row.type === 2) {
                    this.checkedIds.push(row.content);
                    let obj = {
                        id: row.content,
                        name: row.itemName
                    }
                    this.tableData.push(obj);
                }
                this.remainWinRate = this.remainWinRate + row.winRate
                if (this.form.id === 0 || this.form.id === undefined) {
                    this.addGiftForm = {
                        type: row.type !== undefined ? row.type : 1,
                        content: row.content !== undefined ? row.content : "",
                        itemName: row.itemName !== undefined ? row.itemName : "",
                        name: row.name !== undefined ? row.name : "",
                        count: row.count !== undefined ? row.count : 0,
                        winRate: row.winRate !== undefined ? row.winRate : 0,
                        picUrl: row.picUrl !== undefined ? row.picUrl : ""
                    }
                } else {
                    this.addGiftForm = {
                        id: row.id !== undefined ? row.id : "",
                        type: row.type !== undefined ? row.type : 1,
                        content: row.content !== undefined ? row.content : "",
                        itemName: row.itemName !== undefined ? row.itemName : "",
                        name: row.name !== undefined ? row.name : "",
                        count: row.count !== undefined ? row.count : 0,
                        winRate: row.winRate !== undefined ? row.winRate : 0,
                        picUrl: row.picUrl !== undefined ? row.picUrl : ""
                    }
                }
                this.addGiftDialog = true
            },
            deleteGift (row) {
                let index = -1
                this.form.itemsList.forEach(function (item, i) {
                    if (item === row) {
                        index = i
                        return
                    }
                })
                if (index != -1) {
                    this.form.itemsList.splice(index, 1)
                }
            },
            cancelAddForm () {
                window.location.href = '/luck/index'
            },
            saveForm () {
                if (this.form.itemsList.length < 8) {
                    this.$alert('奖项数量不够8个','提示',{
                        confirmButtonText:'确定',
                    })
                    return
                }
                if (this.remainWinRate > 0) {
                    this.$alert('中奖率还剩' + this.remainWinRate + '，请调整中奖率','提示',{
                        confirmButtonText:'确定',
                    })
                    return
                }
                let that = this
                let obj = {
                    name: this.form.name,
                    startTime: this.formatTime(this.form.startTime, true),
                    endTime: this.formatTime(this.form.endTime, true),
                    freeTime: this.form.freeTime,
                    canUsePoint: this.form.canUsePoint,
                    sendPoint: this.form.sendPoint,
                    sendPointType: this.form.sendPointType?1:0,
                    joinTimeType: 5,
                    memo: this.form.memo,
                    banner: this.form.banner,
                    itemsList: this.form.itemsList
                }
                if (this.form.canUsePoint === 1) {
                    obj.pointBuy = this.form.pointBuyPoint + ':' + this.form.pointBuyCount
                }
                if (obj.joinTimeType === 5) {
                    obj.joinTime = this.form.joinTime
                }
                if (this.form.id !== 0) {
                    obj.id = this.form.id
                }
                let loading = this.$loading({fullscreen: true, lock: true, text: '加载中'});
                let url = this.form.id === 0?'/lottery/insert':'/lottery/update'
                this.http(url,obj,function (res) {
                    if(res.status === 200){
                        loading.close();
                        window.location.href = '/luck/index'
                    }else{
                        loading.close();
                        that.$alert(res.errMsg, '提示',{
                            confirmButtonText:'确定',
                        })
                    }
                },function (res) {
                    loading.close();
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            formatterWinRate (row) {
                return row.winRate + '%'
            },
            formatterGiftContent(row){
                if (row.type === 1) {
                    return '【积分】' + row.content
                } else if (row.type === 2) {
                    return '【商品】' + row.itemName
                } else if (row.type === 3) {
                    return '谢谢参与'
                }
            },
            formatterGiftType(row){
                if (row.type === 1) {
                    return '积分'
                } else if (row.type === 2) {
                    return '商品'
                } else if (row.type === 3) {
                    return '谢谢参与'
                }
            },
            showDialog () {
                this.selectItemDialog = true;
            },
            saveCallback () {
                this.checkedIds = this.$refs.selectItem.checked;
                this.selectItemDialog = false;
                this.tableData =  this.$refs.selectItem.checkedData;
                if (this.$refs.selectItem.checkedData.length !== 0) {
                    this.addGiftForm.itemName = this.$refs.selectItem.checkedData[0].name;
                    this.addGiftForm.content = this.$refs.selectItem.checkedData[0].id;
                } else {
                    this.addGiftForm.itemName = "";
                    this.addGiftForm.content = "";
                }
            },
            cancelCallback () {
                this.selectItemDialog = false;
            },
            deletePic () {
                this.addGiftForm.picUrl = "";
            },
            deletePic2 () {
                this.form.banner = "";
            },
            saveGift () {
                if (isNaN(this.addGiftForm.winRate)) {
                    this.addGiftForm.winRate = 0
                }
                this.remainWinRate = this.remainWinRate - this.addGiftForm.winRate
                if (this.addGiftForm.type === 3) {
                    this.addGiftForm.name = '谢谢参与'
                }
                let obj = {};
                if (this.form.id === 0 || this.form.id === undefined) {
                    obj = {
                        type: this.addGiftForm.type,
                        content: this.addGiftForm.content,
                        itemName: this.addGiftForm.itemName,
                        name: this.addGiftForm.name,
                        count: this.addGiftForm.count,
                        winRate: this.addGiftForm.winRate,
                        picUrl: this.addGiftForm.picUrl
                    }
                } else {
                    obj = {
                        id: this.addGiftForm.id,
                        type: this.addGiftForm.type,
                        content: this.addGiftForm.content,
                        itemName: this.addGiftForm.itemName,
                        name: this.addGiftForm.name,
                        count: this.addGiftForm.count,
                        winRate: this.addGiftForm.winRate,
                        picUrl: this.addGiftForm.picUrl
                    }
                }
                this.form.itemsList[this.editIndex] = obj;
                this.checkedIds = [];
                this.tableData = [];
                this.addGiftDialog = false;
            },
            cancelAddGift () {
                this.checkedIds = [];
                this.tableData = [];
                this.remainWinRate = this.remainWinRate - this.addGiftForm.winRate
                this.addGiftDialog = false
            },
            beforeUpload (file) {
                if (file.type === "image/png") {
                    this.imgType = ".png";
                    return true;
                } else if (file.type === "image/jpeg") {
                    this.imgType = ".jpg";
                    return true;
                } else {
                    this.$message.error('上传头像图片只能是 JPG 或 png 格式!');
                    return false;
                }
            },
            uploadSuccess (response, file) {
                if (response.status === 100) {
                    this.addGiftForm.picUrl = response.returnValue[0].id + this.imgType;
                } else {
                    this.$alert('上传失败', '提示', {
                        confirmButtonText: '确定',
                    });
                }
            },
            uploadSuccess2 (response, file) {
                if (response.status === 100) {
                    this.form.banner = response.returnValue[0].id + this.imgType;
                } else {
                    this.$alert('上传失败', '提示', {
                        confirmButtonText: '确定',
                    });
                }
            },
            handleCurrentPageChange(val) {
                this.currentPage = val
            }
        }
    })
</script>

<!-- 20170105 --></body>
</html>